<template>
	<view>
		<h1>Vue 测试用例</h1>
		<view id="video-container"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			videoUrl:
				'https://api-smbcloud.tp-link.com.cn/vms/open/webServer/v1/requestRelayUrl?token=12430-e2FwcGxpY2F0aW9uSWQgPSAxODMyfQ-6ea8dcc0d3444bb5925a8b9955b41ba8&devInfoId=576620008416793428&clientType=browser&streamType=video&resolution=2'
		};
	},
	mounted() {
		console.log(window);
		// 动态加载 SDK 脚本（如果未全局引入）
		this.loadScript()
			.then(() => this.initPlayer())
			.catch((err) => console.error('SDK 加载失败:', err));
	},
	methods: {
		loadScript() {
			return new Promise((resolve, reject) => {
				if (window['tums-player']) return resolve();
				const script = document.createElement('script');
				script.src = '/static/tums-player/tums-player.umd.min.js';
				script.onload = resolve;
				script.onerror = reject;
				document.head.appendChild(script);
			});
		},
		initPlayer() {
			const TumsPlayer = window['tums-player'].default;
			console.log('SDK 已加载:', TumsPlayer);

			this.player = new TumsPlayer('video-container', {
				type: 'relay',
				url: this.videoUrl,
				pluginPath: './static',
				appKey: 'ad66c8c14b1f4f2991b42953c2e25e9b',
				appSecret: '94476b887495461cbbb5a61b5d664cf2'
			});
		}
	},
	beforeDestroy() {
		// 销毁播放器实例（如果 SDK 提供了销毁方法）
		if (this.player && this.player.destroy) {
			this.player.destroy();
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep #video-container {
	width: 100% !important;
	height: 450rpx;
	// background-color: skyblue;
	margin: 0 !important;
	padding: 0 !important;
}
</style>
